<template>
<ul>
  <li v-for="item in notices">{{item.content}} --- {{item.createTime}} --- {{item.readStatus}}
    <a-button @click="changeReadStatus(item.id)" v-if="item.readStatus == 'Unread'">收到</a-button>
  </li>
</ul>
</template>

<script>
import axios from "axios";
export default {
  name: "Notification",
  data(){
    return{
      notices:[],
      noticeQuery:{
        userId:0
      }
    }
  },
  methods:{
    loadNotices(){
      this.noticeQuery.userId = this.loginUser.id
      axios.get(`/notice/list`,{
        params:{
          ...this.noticeQuery
        }
      }).then(res => {
        this.notices = res.data.data
      })
    },
    changeReadStatus(id){
      axios.put("/notice/update/status",{
        id:id,
        readStatus:'Read'
      }).then(res => {
        this.loadNotices()
      })
    }
  },
  computed: {
    loginUser() {
      return this.$store.state.user;
    }
  },
  created() {
    this.loadNotices()
  }
}
</script>

<style scoped>

</style>